<template>
	<view class="container">
		<!-- 头部 商家基本信息 -->
		<view class="header-c">
			<view class="header">
				<view class="h-l">
					<img class="shop-logo" :src="shopInfo.pic_url">
				</view>
				<view class="h-r">
					<view class="r-t">
						<span class="t-l">{{shopInfo.min_price_tip}}</span>
						<view class="s-l"></view>
						<span class="t-m">{{shopInfo.delivery_time_tip}}</span>
						<view class="s-r"></view>
						<span class="t-r">{{shopInfo.distance}}</span>
					</view>
					<span class="r-m">公告：{{shopInfo.bulletin}}</span>
					<view class="r-b">
						<span class="b-l">减</span>
						<span class="b-r">{{reduceTip}}</span>
						<i class="icon mt-arrow-right-o"></i>
					</view>
				</view>
			</view>
			<view class="cate-c">
				<span class="c-l " :style="{'font-weight': pageIndex === 0 ? 'bold' : null}" @click="pageIndex = 0">菜单</span>
				<span class="c-m bottom-line" :style="{'font-weight': pageIndex === 1 ? 'bold' : null}" @click="pageIndex = 1">评价</span>
				<span class="c-r" :style="{'font-weight': pageIndex === 2 ? 'bold' : null}" @click="pageIndex = 2">商家</span>
				<view class="line" :style="lineStyle"></view>
			</view>
		</view>
		<!-- 菜单 -->
		<Menu v-if="pageIndex === 0" />
		<!-- 评价 -->
		<Recommend v-else-if="pageIndex === 1" />
		<!-- 商家 -->
		<Merchant v-else />
		<!-- 底部 -->
		<Footer v-if="pageIndex === 0" :reduceTip="reduceTip" :support_pay="shopInfo.support_pay" />
	</view>
</template>

<script>
	import {mapActions, mapState, mapGetters} from 'vuex'
	// 引入子组件
	import Menu from './components/menu.vue'
	import Recommend from './components/recommend.vue'
	import Merchant from './components/merchant.vue'
	import Footer from './components/footer.vue'
	export default {
		data() {
			return {
				pageIndex: 0, 
			}
		},
		components: {Menu, Recommend, Merchant, Footer},
		computed: {
			...mapState({
				menuData: state => state.shopInfo.menuData
			}),
			...mapGetters([
				'shopInfo', // 顶部商家信息
			]),
			// 底部黄线的样式
			lineStyle() {
				return 'left:' + (this.pageIndex * 145 + 40) + 'rpx;'
			},
			// 满减
			reduceTip() {
				return this.menuData.shopping_cart && this.menuData.shopping_cart.prompt_text
			}
		},
		methods: {
			...mapActions(['getShopInfo'])
		},
		// 组件挂载完毕
		mounted() {
			this.getShopInfo(this.$mp.query.id)
		}
	}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: $page-bgcolor;
  position: relative;
  .header-c {
    display: flex;
    flex-direction: column;
    position: fixed;
    .header {
      display: flex;
      align-items: center;
      background-color: #333;
      height: 150rpx;
      .h-l {
        display: flex;
        margin-left: 16rpx;
        .shop-logo {
          height: 120rpx;
          width: 120rpx;
          border-radius: 8rpx;
        }
      }
      .h-r {
        display: flex;
        flex-direction: column;
        margin: 0 20rpx;
        .r-t {
          display: flex;
          align-items: center;
          .t-l {
            font-size: 20rpx;
            color: white;
          }
          .s-l {
            margin: 0 20rpx;
            width: 2rpx;
            height: 30rpx;
            background-color: white;
          }
          .t-m {
            font-size: 20rpx;
            color: white;
          }
          .s-r {
            margin: 0 20rpx;
            width: 2rpx;
            height: 30rpx;
            background-color: white;
          }
          .t-r {
            font-size: 20rpx;
            color: white;
          }
        }
        .r-m {
          font-size: 20rpx;
          color: white;
          line-height: 30rpx;
          height: 30rpx;
          overflow: hidden;
          margin: 10rpx 0;
        }
        .r-b {
          display: flex;
          align-items: center;
          .b-l {
            width: 30rpx;
            height: 30rpx;
            background-color: #FF616D;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            font-size: 20rpx;
          }
          .b-r {
            font-size: 20rpx;
            color: white;
            flex: 1;
            margin-left: 20rpx;
          }
          i {
            font-size: 20rpx;
            color: white;
          }
        }
      }
    }
    .cate-c {
      display: flex;
      height: 70rpx;
      align-items: center;
      border-bottom: 2rpx solid $spLine-color;
      position: relative;
      transition: all 0.2s;
			span: {
				position: relative;
			}
      .c-l {
        font-size: 32rpx;
        color: $textBlack-color;
        margin-left: 40rpx;
      }
      .c-m {
        font-size: 32rpx;
        color: $textBlack-color;
        margin-left: 80rpx;
      }
      .c-r {
        font-size: 32rpx;
        color: $textBlack-color;
        margin-left: 80rpx;
      }
      .line {
        position: absolute;
        width: 60rpx;
        height: 4rpx;
        background-color: $theme-color;
        left: 40rpx;
        bottom: 2rpx;
        transition: left 0.2s;
      }
    }
  }
  
	.sku-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.3);
    z-index: 996;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    .modal-c {
      display: flex;
      flex-direction: column;
      background-color: white;
      width: 90%;
      margin-right: 40rpx;
      margin-left: 40rpx;
      border-radius: 10rpx;
      .header {
        display: flex;
        flex-direction: column;
        .title {
          font-size: 32rpx;
          color: $textDarkGray-color;
          align-self: center;
          margin-top: 20rpx;
        }
        .attrs {
          display: flex;
          flex-direction: column;
          margin: 0 20rpx;
          margin-top: 20rpx;
          .name {
            font-size: 28rpx;
            color: $textBlack-color;
          }
          .sku {
            display: flex;
            flex-direction: row;
            width: 100%;
            flex-wrap: wrap;
            margin-bottom: 20rpx;
            .item {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 140rpx;
              height: 50rpx;
              border: 2rpx solid $spLine-color;
              border-radius: 4rpx;
              margin-top: 20rpx;
              margin-right: 20rpx;
              span {
                font-size: 24rpx;
                color: $textBlack-color
              }
            }
            .selected {
              background-color: #FFF9F4;
              border: 2rpx solid $theme-color;
              span {
                color: $theme-color;
              }
            }
          }
        }
      }
      .footer {
        display: flex;
        align-items: center;
        background-color: $page-bgcolor;
        height: 100rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        padding: 0 20rpx;
        .f-l {
          display: flex;
          align-items: center;
          flex: 1;
          .price {
            font-size: 36rpx;
            color: $mtRed-color;
            font-weight: bold;
          }
          .sku {
            font-size: 20rpx;
            color:  $textBlack-color;
            margin-left: 20rpx;
          }
        }
        .f-r {
          display: flex;
          align-items: center;
          .shopping-c {
            display: flex;
            align-items: center;
            height: 60rpx;
            border-radius: 30rpx;
            padding: 0 20rpx;
            background-color: $theme-color;
            i {
              font-size: 28rpx;
              color:  $textBlack-color;
            }
            span {
              font-size: 24rpx;
              color:  $textBlack-color;
              margin-left: 10rpx;
            }
          }
          .add {
            display: flex;
            flex-direction: row;
            align-items: center;
            span {
              font-size: 24rpx;
              color: $textDarkGray-color;
              margin: 0 20rpx;
            }
          }
        }
      }
    }
    .cancle {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
      width: 70rpx;
      height: 70rpx;
      border-radius: 35rpx;
      background: rgba($color: #000000, $alpha: 0.5);
      border: 2rpx solid $textGray-color;
      i {
        font-size: 32rpx;
        color: white;
      }
    }
  }
  .previewModal {
    @extend .sku-modal;
    .modal-c {
      .header-p {
        display: flex;
        flex-direction: column;
        .item-img {
          width: 100%;
          height: 400rpx;
          background-color: #E7AC40;
          border-top-left-radius: 10rpx;
          border-top-right-radius: 10rpx;
        }
        .title {
          font-size: 28rpx;
          color: $textBlack-color;
          font-weight: bold;
          margin-left: 16rpx;
          margin-top: 16rpx;
        }
        .saled {
          display: flex;
          align-items: center;
          flex-direction: row;
          margin: 0 16rpx;
          margin-top: 10rpx;
          .l {
            font-size: 20rpx;
            color: $textDarkGray-color;
          }
          .r {
            @extend .l;
            margin-left: 30rpx;
          }
        }
        .tags-c {
          display: flex;
          align-items: center;
          margin: 0 16rpx;
          margin-top: 10rpx;
          flex-wrap: wrap;
          img {
            width: 60rpx;
            height: 30rpx;
            background-size: cover;
          }
        }
        .desc {
          font-size: 20rpx;
          color: $textDarkGray-color;
          margin-left: 16rpx;
          margin-top: 30rpx;
          margin-bottom: 20rpx;
        }
      }
      .footer-p {
        display: flex;
        align-items: center;
        height: 80rpx;
        background-color: $page-bgcolor;
        padding: 0 20rpx;
        border-bottom-left-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        .l {
          font-size: 36rpx;
          color: $mtRed-color;
          flex: 1;
          font-weight: bold;
        }
        .r {
          display: flex;
          align-items: center;
          .add-c {
            display: flex;
            align-items: center;
            .c-l {
              display: flex;
              align-items: center;
            }
            span {
              font-size: 20rpx;
              color: $textBlack-color;
              margin: 0 20rpx;
            }
          }
          .attr {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $theme-color;
            padding: 8rpx 12rpx;
            border-radius: 25rpx;
            position: relative;
            span {
              font-size: 20rpx;
              color: $textBlack-color
            }
            .count {
              width: 30rpx;
              height: 30rpx;
              background-color: $mtRed-color;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              color: white;
              font-size: 20rpx;
              right: 0;
              top: -14rpx;
              border-radius: 15rpx;
            }
          }
        }
      }
    }
  }
}
</style>